﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">StackGrid</title>
  <keywords>
    <keyword translate="true">StackGrid</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">StackGrid</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Although the example looks crappy (I am not a designer), it shows the power of the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true">. You don&apos;t have to specify the </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Row</text><text styleclass="Normal" translate="true"> and </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Column</text><text styleclass="Normal" translate="true"> attached properties. Remember the times that you want to insert a grid and you had to increase all the numbers? From now on, use the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true">!</text></para>
    <para styleclass="Normal"><image src="stackgrid.png" scale="100.00%" styleclass="Image Caption"></image></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">    </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true"> Row definitions </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid.RowDefinitions</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">RowDefinition</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Height=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Auto</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">RowDefinition</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Height=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Auto</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; MinHeight=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">15</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">RowDefinition</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Height=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Auto</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid.RowDefinitions</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true"> Column definitions </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid.ColumnDefinitions</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">ColumnDefinition</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Width=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Auto</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">ColumnDefinition</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Width=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">*</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid.ColumnDefinitions</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true"> Name, will be set to row 0, column 1 and 2 </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Name</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">TextBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Text=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Geert van Horrik</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true"> Empty row </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:EmptyRow</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;!--</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true"> Wrappanel, will span 2 columns </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">--&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">WrapPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Grid.ColumnSpan=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">2</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">           </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">Button</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true"> Command=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">ApplicationCommands.Close</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">     </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">WrapPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; text-decoration:none; color:#000080;" translate="true">catel:StackGrid</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid</text><text styleclass="Normal" translate="true"> is an excellent control to show several controls in a nice layout on the screen. However, it happens a lot that a grid consists of only 2 or 3 columns, and the first column is for all the labels, and the second one is for controls such as textboxes. You correctly implement all the windows and controls of your application based on user requirements, and then the user decides that he/she wants a row inserted into a grid containing about 20 rows. When this happens, you need to re-define all the row attributes of the grid.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">With the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true">, it is no longer required to define the row and column definitions. The </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true"> can smartly interpret the location of the controls and therefore fill in the </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Row </text><text styleclass="Normal" translate="true">and </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Column </text><text styleclass="Normal" translate="true">attached properties for you. You need an empty row? No problem, you can use the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_EmptyRow" styleclass="Normal" translate="true">EmptyRow</link><text styleclass="Normal" translate="true"> class to fill up a row for you. You want a column span? No problem, just use the existing </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Column</text><text styleclass="Normal" translate="true"> attached property and the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true"> will automatically handle this for you.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Controls_StackGrid" styleclass="Normal" translate="true">StackGrid</link><text styleclass="Normal" translate="true"> internally uses a </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid</text><text styleclass="Normal" translate="true"> to measure the layout. However, it dynamically loops through its children, and then assigns the </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Row</text><text styleclass="Normal" translate="true"> and </text><text styleclass="Normal" style="font-style:italic;" translate="true">Grid.Column</text><text styleclass="Normal" translate="true"> attached properties for the user.</text></para>
  </body>
</topic>
